<template>
  <div class="banner">
    <nav1></nav1>
     <div class="banner1">
       <el-carousel >

    <el-carousel-item v-for="(item,index) in banner1" :key="index">

      <img :src="item.pic" alt="">

    </el-carousel-item>
    
  </el-carousel>
     </div>

  </div>
  
</template>

<script>
import nav1 from '../../components/nav'
import {banner} from '../../api/index'

export default {
  components:{
nav1
  },
  data(){
   return {
      banner1:[]
   }
  },
  methods:{
    //banner api
    banner(){
      this.axios.get(banner).then(res=>{
        // console.log(res.data.data.banner_list);
        this.banner1=res.data.data.banner_list
      }).catch(err=>{
        console.log(err);
      })
    }
  },
  created(){
    this.banner()
  }
  
}
</script>
<style lang="scss" scoped>
.banner{
 
 width: 1400px;
margin: 0  auto;
}
.banner1{
  margin-top: 100px;
}
img{
  width: 100%;
  height: 500px;
}
.el-carousel__container {
    position: relative;
    height: 500px;
    border: 1px solid;
}
.baner-button{
   margin-top: -50px  ;
   z-index: 999 !important;
   width: 1400px ;
   height: 50px;
   border: 1px solid;
   background-color: rgba(0,0,0,.15);
   ul{
     display: flex;
     justify-content: space-evenly;
     li{
       line-height: 50px;
     }
   }
 }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
    
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
   .el-carousel__indicators--horizontal {
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
    
       }
  
</style>